import { Metadata } from 'next';
import { ROICalculator } from '@/components/roi-calculator';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Calculator,
  TrendingUp,
  DollarSign,
  Users,
  CheckCircle,
  ArrowRight,
  BarChart3,
  Target,
  Award,
} from 'lucide-react';

export const metadata: Metadata = {
  title: 'CActor ROI计算器 | 投资回报分析工具 - 性能提升、成本节约评估',
  description:
    '使用CActor ROI计算器精确评估Actor框架投资回报：分析性能提升(649K req/s)、成本节约、开发效率提升。基于真实金融项目数据，帮助企业做出明智的技术选型决策。',
  keywords: [
    'CActor ROI计算器',
    '投资回报分析',
    'Actor框架ROI',
    '性能提升评估',
    '成本节约',
    '技术选型',
    '金融科技ROI',
    '649K req/s',
    '开发效率',
    '企业级',
    '仓颉语言',
    '分布式系统',
    '高性能',
    '业务价值',
    '技术决策',
  ],
  openGraph: {
    title: 'CActor ROI计算器 | 投资回报分析工具',
    description:
      '使用CActor ROI计算器精确评估Actor框架投资回报：分析性能提升、成本节约、开发效率提升',
    url: 'https://cactor.dev/roi',
    siteName: 'CActor',
    images: [
      {
        url: '/roi-og-image.png',
        width: 1200,
        height: 630,
        alt: 'CActor ROI计算器',
      },
    ],
    locale: 'zh_CN',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'CActor ROI计算器 | 投资回报分析工具',
    description:
      '使用CActor ROI计算器精确评估Actor框架投资回报：分析性能提升、成本节约、开发效率提升',
    images: ['/roi-twitter-image.png'],
  },
  alternates: {
    canonical: '/roi',
  },
};

/**
 * 成功案例ROI数据
 */
const successCases = [
  {
    industry: '银行业',
    company: '某国际知名银行',
    investment: '¥500万',
    returns: '¥2000万',
    roi: '300%',
    payback: '8个月',
    highlights: ['交易延迟降低85%', '处理能力提升300%', '运营成本节约40%'],
    icon: '🏦',
  },
  {
    industry: '金融科技',
    company: '领先支付公司',
    investment: '¥300万',
    returns: '¥1200万',
    roi: '280%',
    payback: '6个月',
    highlights: ['日处理量提升400%', '响应时间降低80%', '系统可用性99.95%'],
    icon: '💳',
  },
  {
    industry: '证券业',
    company: '头部证券公司',
    investment: '¥800万',
    returns: '¥2800万',
    roi: '250%',
    payback: '10个月',
    highlights: ['风险识别准确率95%+', '处理速度提升200%', '误报率降低60%'],
    icon: '📈',
  },
];

/**
 * ROI计算方法说明
 */
const calculationMethods = [
  {
    title: '性能提升收益',
    description: '基于处理能力提升带来的业务增长',
    formula: '日交易量 × 性能提升比例 × 单笔收益 × 365天',
    icon: TrendingUp,
  },
  {
    title: '成本节约收益',
    description: '通过系统优化降低的运营成本',
    formula: '年度运营成本 × 成本降低比例',
    icon: DollarSign,
  },
  {
    title: '质量提升价值',
    description: '延迟降低和稳定性提升的间接价值',
    formula: '风险降低 + 用户体验提升 + 合规成本节约',
    icon: Award,
  },
  {
    title: '实施成本计算',
    description: '项目实施的一次性投入成本',
    formula: '团队规模 × 人月成本 × 项目周期',
    icon: Calculator,
  },
];

export default function ROIPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* Hero Section */}
      <section className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <div className="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 text-sm font-medium mb-6">
            <Calculator className="w-4 h-4 mr-2" />
            投资回报分析
          </div>
          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            精准计算
            <span className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
              投资回报
            </span>
          </h1>
          <p className="text-xl text-gray-600 mb-12">
            基于真实客户案例数据，为您精确计算采用CActor框架的投资回报率，
            帮助您做出明智的技术决策。
          </p>
        </div>
      </section>

      {/* ROI计算器 */}
      <section className="py-16 px-4">
        <ROICalculator />
      </section>

      {/* 成功案例ROI */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              真实案例ROI数据
            </h2>
            <p className="text-lg text-gray-600">
              以下是我们客户的真实投资回报数据，为您的决策提供参考。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {successCases.map((case_, index) => (
              <Card
                key={index}
                className="hover:shadow-lg transition-all duration-300 group"
              >
                <CardHeader>
                  <div className="flex items-center justify-between mb-4">
                    <div className="text-4xl">{case_.icon}</div>
                    <Badge className="bg-green-100 text-green-700">
                      ROI {case_.roi}
                    </Badge>
                  </div>
                  <CardTitle className="text-xl">{case_.industry}</CardTitle>
                  <CardDescription>{case_.company}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  {/* 投资回报数据 */}
                  <div className="grid grid-cols-2 gap-4">
                    <div className="text-center p-3 bg-gray-50 rounded-lg">
                      <div className="text-lg font-bold text-gray-900">
                        {case_.investment}
                      </div>
                      <div className="text-sm text-gray-600">投资成本</div>
                    </div>
                    <div className="text-center p-3 bg-green-50 rounded-lg">
                      <div className="text-lg font-bold text-green-600">
                        {case_.returns}
                      </div>
                      <div className="text-sm text-gray-600">3年收益</div>
                    </div>
                  </div>

                  <div className="text-center p-4 bg-blue-50 rounded-lg">
                    <div className="text-2xl font-bold text-blue-600 mb-1">
                      {case_.payback}
                    </div>
                    <div className="text-sm text-gray-600">投资回收期</div>
                  </div>

                  {/* 关键成果 */}
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-3">
                      关键成果：
                    </h4>
                    <div className="space-y-2">
                      {case_.highlights.map((highlight, highlightIndex) => (
                        <div
                          key={highlightIndex}
                          className="flex items-center text-sm"
                        >
                          <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                          <span className="text-gray-600">{highlight}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 计算方法说明 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              ROI计算方法
            </h2>
            <p className="text-lg text-gray-600">
              我们的ROI计算基于科学的财务模型和真实的行业数据。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {calculationMethods.map((method, index) => {
              const Icon = method.icon;
              return (
                <Card key={index} className="hover:shadow-md transition-shadow">
                  <CardHeader>
                    <div className="flex items-center">
                      <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center mr-4">
                        <Icon className="w-6 h-6 text-white" />
                      </div>
                      <div>
                        <CardTitle className="text-xl">
                          {method.title}
                        </CardTitle>
                        <CardDescription>{method.description}</CardDescription>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="bg-gray-50 rounded-lg p-4">
                      <div className="text-sm text-gray-600 mb-2">
                        计算公式：
                      </div>
                      <div className="font-mono text-sm text-gray-900 bg-white p-3 rounded border">
                        {method.formula}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* 数据来源说明 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-4xl mx-auto">
          <Card className="bg-gradient-to-r from-blue-50 to-cyan-50">
            <CardHeader>
              <CardTitle className="text-center text-2xl">
                数据来源与可靠性
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="text-center">
                  <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-4">
                    <BarChart3 className="w-8 h-8 text-blue-600" />
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">
                    真实案例数据
                  </h3>
                  <p className="text-sm text-gray-600">
                    基于50+真实客户项目的实际数据统计
                  </p>
                </div>

                <div className="text-center">
                  <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
                    <Users className="w-8 h-8 text-green-600" />
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">
                    行业基准对比
                  </h3>
                  <p className="text-sm text-gray-600">
                    参考权威机构发布的行业基准数据
                  </p>
                </div>

                <div className="text-center">
                  <div className="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-4">
                    <Target className="w-8 h-8 text-purple-600" />
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">
                    专业财务模型
                  </h3>
                  <p className="text-sm text-gray-600">
                    采用标准的NPV和IRR财务评估模型
                  </p>
                </div>
              </div>

              <div className="text-center pt-6 border-t">
                <p className="text-sm text-gray-600 mb-4">
                  * 计算结果仅供参考，实际ROI可能因具体业务场景而异。
                  建议结合专业咨询进行详细评估。
                </p>
                <Button className="bg-blue-600 hover:bg-blue-700">
                  联系专业顾问
                  <ArrowRight className="w-4 h-4 ml-2" />
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 bg-gradient-to-r from-blue-600 to-cyan-600">
        <div className="max-w-4xl mx-auto text-center text-white">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            准备开始您的数字化转型？
          </h2>
          <p className="text-xl mb-8 opacity-90">
            基于ROI分析结果，联系我们的专家团队，
            制定适合您业务的CActor实施方案。
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              variant="secondary"
              className="bg-white text-blue-600 hover:bg-gray-100"
            >
              <Calculator className="w-5 h-5 mr-2" />
              重新计算ROI
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-blue-600"
            >
              <Users className="w-5 h-5 mr-2" />
              联系专家团队
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
